<template>
  <div class="move-warp">
    <div class="item">
      <div class="title">
        额外服务设置
        <el-button
          class="operate"
          size="small"
          type="primary"
          :icon="Plus"
          @click="toSaveExtInfo"
          >新增额外服务</el-button
        >
      </div>
      <div class="content">
        <el-table :data="extInfoList" broder style="width: 100%">
          <el-table-column prop="id" label="服务编号" width="80" />
          <el-table-column
            prop="name"
            label="服务名称"
            show-overflow-tooltip
            width="200"
          />
          <el-table-column prop="price" label="价格" width="100" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button
                type="primary"
                :icon="Edit"
                size="small"
                @click="toUpdateExtInfo(scope.row)"
                >修改</el-button
              >
              <el-popconfirm
                title="确定删除该服务?"
                @confirm="doDeleteExtInfo(scope.row.id)"
              >
                <template #reference>
                  <el-button type="danger" :icon="Delete" size="small"
                    >删除</el-button
                  >
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="item">
      <div class="title">车辆使用费设置</div>
      <div class="content">
        <el-table :data="carTypeList" broder style="width: 100%">
          <el-table-column prop="id" label="类型编号" width="80" />
          <el-table-column
            prop="name"
            label="车辆类型"
            show-overflow-tooltip
            width="200"
          />
          <el-table-column prop="price" label="价格" width="100" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button
                type="primary"
                :icon="Edit"
                size="small"
                @click="toUpdateCarType(scope.row)"
                >修改</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

      <el-dialog
    v-model="dialogVisible"
    :title="extInfo.id ? '修改服务信息' : '新增服务信息'"
    width="500px"
  >
    <el-form
      :rules="rules"
      style="margin-top: 20px"
      ref="formEl"
      :model="extInfo"
      label-width="80px"
    >
      <el-form-item label="服务名称" prop="name">
        <el-input
          :maxlength="250"
          type="textarea"
          v-model="extInfo.name"
        ></el-input>
      </el-form-item>
      <el-form-item label="价格(元)" prop="price">
        <el-input-number
          style="width: 100%"
          placeholder="输入价格"
          :controls="false"
          v-model="extInfo.price"
          :min="0"
          :max="1000000"
          :precision="2"
        ></el-input-number>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="doSaveExtInfo">确定</el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog
    v-model="dialogVisible2"
    :title="'修改车辆使用费'"
    width="500px"
  >
    <el-form
      :rules="rules2"
      style="margin-top: 20px"
      ref="formEl2"
      :model="carType"
      label-width="80px"
    >
      <el-form-item label="车辆类型" prop="name">
        <el-input
          disabled=""
          v-model="carType.name"
        ></el-input>
      </el-form-item>
      <el-form-item label="价格(元)" prop="price">
        <el-input-number
          style="width: 100%"
          placeholder="输入价格"
          :controls="false"
          v-model="carType.price"
          :min="0"
          :max="1000000"
          :precision="2"
        ></el-input-number>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取消</el-button>
        <el-button type="primary" @click="doUpdateCarType">确定</el-button>
      </span>
    </template>
  </el-dialog>
  </div>


</template>
<script setup>
import { ref, getCurrentInstance, reactive } from "vue";
import {
  getExtInfoList,
  saveExtInfo,
  updateExtInfo,
  deleteExtInfo,
} from "../../api/move";
import { getCarTypeList } from "../../api/order";
import { Plus, Edit, Delete } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { updateCarType } from "../../api/move";

const extInfoList = ref([]);
const toGetExtInfoList = () => {
  getExtInfoList().then((res) => {
    extInfoList.value = res.data;
  });
};
toGetExtInfoList();

const extInfo = ref({});

const formEl = ref();

const clearWarning = () => {
  if (formEl.value) {
    formEl.value.resetFields();
  }
};

const dialogVisible = ref(false);

const rules = reactive({
  name: [
    {
      required: true,
      message: "请输入服务名称",
      trigger: "blur",
    },
  ],
  price: [
    {
      required: true,
      message: "请输入服务价格",
      trigger: "blur",
    },
  ],
});

const toSaveExtInfo = () => {
  extInfo.value = {};
  clearWarning();
  dialogVisible.value = true;
};

const doSaveExtInfo = () => {
  formEl.value.validate((valid) => {
    if (valid) {
      if (!extInfo.value.id) {
        saveExtInfo(extInfo.value).then((res) => {
          ElMessage.success("新增服务成功");
          dialogVisible.value = false;
          toGetExtInfoList();
        });
      } else {
        updateExtInfo(extInfo.value).then((res) => {
          ElMessage.success("修改服务成功");
          dialogVisible.value = false;
          toGetExtInfoList();
        });
      }
    } else {
      console.log("error submit!");
      return false;
    }
  });
};

const { proxy } = getCurrentInstance();

const toUpdateExtInfo = (data) => {
  extInfo.value = proxy.$deepCopy(data);
  clearWarning();
  dialogVisible.value = true;
};

const doDeleteExtInfo = (id) => {
  deleteExtInfo(id).then((res) => {
    toGetExtInfoList();
    ElMessage.success("删除成功");
  });
};

const carTypeList = ref([]);

const toGetCarTypeList = () => {
  getCarTypeList().then((res) => {
    carTypeList.value = res.data;
  });
};

toGetCarTypeList();

const carType = ref({});

const formEl2 = ref();

const dialogVisible2 = ref(false);

const rules2 = reactive({
  price: [
    {
      required: true,
      message: "请输入价格",
      trigger: "blur",
    },
  ],
});

const clearWarning2 = () => {
  if (formEl2.value) {
    formEl2.value.resetFields();
  }
};

const toUpdateCarType = (data) => {
  carType.value = proxy.$deepCopy(data);
  clearWarning2();
  dialogVisible2.value = true;
};

const doUpdateCarType = () => {
  formEl2.value.validate((valid) => {
    if (valid) {
      updateCarType(carType.value).then((res) => {
        ElMessage.success("修改车辆使用费成功");
        dialogVisible2.value = false;
        toGetCarTypeList();
      });
    }
  });
};
</script>

<style lang="less" scoped>
.move-warp {
  display: flex;
  height: calc(100% - 20px);

  .item {
    flex: 1;
    border: 1px solid #d1d1d1;
    border-radius: 5px;
    padding: 10px;
    height: 100%;
    margin-right: 20px;
    display: flex;
    flex-direction: column;
    &:last-child {
      margin-right: unset;
    }
    .title {
      font-weight: bold;

      .operate {
        float: right;
      }
    }

    .content {
      flex: 1;
      overflow-y: auto;
    }
  }
}
</style>
